<template>
  <div>
  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="green-1"
              size="sm"
              text-color="green"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />今日总销售笔数
            <q-space />
            <q-chip
              size="sm"
              square
              outline
              color="green"
              class="bg-green-1 float-right"
              label="日"
            />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{countToday}}</div>
        </q-card-section>
        <q-card-section>
          ---
        <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">今日订单数￥ {{countToday}}</div>
        </q-card-actions>
      </q-card>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="red-1"
              size="sm"
              text-color="red"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />月度订单量
            <q-space />
            <q-chip size="sm" square outline color="blue" class="bg-blue-1" label="月"></q-chip>
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{countMonth}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">月订单量{{countMonth}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />总笔数
            <q-space />
            <q-chip size="sm" square outline color="red" class="bg-red-1 float-right" label="总量" />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{countTotal}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">总笔数{{countTotal}}</div>
        </q-card-actions>
      </q-card>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="green-1"
              size="sm"
              text-color="green"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />已经认证的服务商数量
            <q-space />
            <q-chip
              size="sm"
              square
              outline
              color="green"
              class="bg-green-1 float-right"
              label="日"
            />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{serviceIdentify}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">已经认证的服务商数量{{serviceIdentify}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="red-1"
              size="sm"
              text-color="red"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />未认证的服务商数量
            <q-space />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{serviceNotIdentify}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">未认证的服务商数量{{serviceNotIdentify}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />总服务商数量
            <q-space />
            <q-chip size="sm" square outline color="red" class="bg-red-1 float-right" label="总量" />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{serviceTotal}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">总服务商数量{{serviceTotal}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />所有用户
            <q-space />
            <q-chip size="sm" square outline color="red" class="bg-red-1 float-right" label="总量" />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{userTotal}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">所有用户{{userTotal}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />所有未认证的用户
            <q-space />
            <q-chip size="sm" square outline color="red" class="bg-red-1 float-right" label="总量" />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{userNotIdentify}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">所有未认证的用户{{userNotIdentify}}</div>
        </q-card-actions>
      </q-card>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 q-px-sm q-mb-md">
      <q-card class="home-sale-card">
        <q-card-section>
          <div class="row nowrap items-center">
            <q-avatar
              color="orange-1"
              size="sm"
              text-color="orange"
              class="q-mr-sm"
              icon="mdi-point-of-sale"
            />所有认证的用户
            <q-space />
            <q-chip size="sm" square outline color="red" class="bg-red-1 float-right" label="总量" />
          </div>
          <q-separator class="q-my-sm" />
          <div class="text-h5">{{userIdentify}}</div>
        </q-card-section>
        <q-card-section>
          ---
          <q-icon name="mdi-triangle" class="text-green rotate-180" />
        </q-card-section>
        <q-separator />
        <q-card-actions>
          <div class="text-subtitle">所有认证的用户{{userIdentify}}</div>
        </q-card-actions>
      </q-card>
    </div>
  </div>
  </div>
</template>

<script>
import miniarea from 'components/chart/miniarea';
import minibar from 'components/chart/minibar';

export default {
  name: 'SaleStat',
  props: {
    screenWidth: Number,
  },
  components: {
    miniarea,
    minibar,
  },
  data() {
    return {
      countMonth: '',
      countToday: '',
      countTotal: '',
      serviceIdentify: '',
      serviceNotIdentify: '',
      serviceTotal: '',
      userIdentify: '',
      userNotIdentify: '',
      userTotal: '',
    };
  },
  methods: {
    sitecountshow () {
      // const url = "/sitecountshow";
      // this.$axios.post(url, { }).then((r) => {
      //
      //   if (r.code == 0) {
      //     this.countMonth = r.data.countMonth
      //     this.countToday = r.data.countToday
      //     this.countTotal = r.data.countTotal
      //   }
      // });
    },
    getSixUserStat () {
      // const url = "/sitecountshow";
      // this.$axios.post(url, {ctype:11 }).then((r) => {
      //   if (r.code == 0) {
      //     this.serviceIdentify = r.data.serviceIdentify
      //     this.serviceNotIdentify = r.data.serviceNotIdentify
      //     this.serviceTotal    = r.data.serviceTotal
      //     this.userIdentify    = r.data.userIdentify
      //     this.userNotIdentify = r.data.userNotIdentify
      //     this.userTotal       = r.data.userTotal
      //   }
      // });
    },
  },
  computed: {
  },
  created() {
    this.sitecountshow()
    this.getSixUserStat()
  },
  mounted() {
  },
};
</script>

<style lang="stylus">
.home-sale-card
  min-width 200px
  height 200px
</style>
